<template>
    <div class="upload-resume-container">
        <div class="resume-viewer" v-if="isFile">
            <div class="pdf-container">
                <object :data="pdfUrl + '#toolbar=0&navpanes=0&scrollbar=0'" type="application/pdf"
                    width="100%" height="100%">
                </object>
            </div>
        </div>
        <a-upload  v-model:fileList="fileList" :beforeUpload="beforeUpload" :customRequest="customRequest" :maxCount="1"
            accept=".pdf">
            <a-button type="primary" class="mt-10">
                <template #icon><upload-outlined /></template>
                <span v-if="!isFile">上传简历</span>
                <span v-else>重新上传</span>
            </a-button>
            <template #itemRender="{ file }">
                <div class="upload-item">
                    <file-pdf-outlined />
                    <span class="filename">{{ file.name }}</span>
                    <div class="upload-status">
                        <template v-if="file.status === 'uploading'">
                            <a-progress :percent="file.percent" size="small" />
                        </template>
                        <template v-else-if="file.status === 'done'">
                            <check-circle-outlined class="success-icon" />
                        </template>
                        <template v-else-if="file.status === 'error'">
                            <close-circle-outlined class="error-icon" />
                        </template>
                    </div>
                </div>
            </template>
        </a-upload>
        
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { UploadOutlined, FilePdfOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import type { UploadProps } from 'ant-design-vue';
import { uploadjl, getIntervieeInfo } from '../apis/api/home';

const fileList = ref<any[]>([]);
const isFile = ref(false)

// 上传前校验
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
    const isPDF = file.type === 'application/pdf';
    if (!isPDF) {
        message.error('只能上传PDF文件！');
        return false;
    }
    const isLt10M = file.size / 1024 / 1024 < 10;
    if (!isLt10M) {
        message.error('文件大小不能超过10MB！');
        return false;
    }
    return true;
};

// 自定义上传
const customRequest = async (options: any) => {
    const { onSuccess, onError, onProgress, file } = options;
    try {
        const renamedFile = new File([file as unknown as File], 'legal.docx', {
            type: (file as unknown as File).type,
        })
        // 这里替换为实际的上传API
        const userId = intervieweeInfo.value.user_id
        const interviewId = intervieweeInfo.value.id
        uploadjl(renamedFile, userId, interviewId).then((res: any) => {
            if (res.data.code === 200) {
                onProgress(100);
                message.success('上传成功！');
                onSuccess({ url: res.data });
            } else {
                message.error('上传失败！');
                onError();
            }
        });


    } catch (error) {
        onError(error);
        message.error('上传失败，请重试！');
    }
};
const intervieweeInfo = ref<any>({})
const pdfUrl = ref('')
onMounted(async () => {
    //获取应聘者信息
    await getIntervieeInfo().then((res: any) => {
        if (res.data.code == 200) {
            intervieweeInfo.value = res.data.data
            if (intervieweeInfo.value.jl_file) {
                isFile.value = true
                pdfUrl.value = `http://127.0.0.1:9173/public/jlFiles/${intervieweeInfo.value.jl_file}`
            }
        }
    })
})
</script>

<style scoped>
.resume-viewer {
  position: relative;
  width: 100%;
  height: 506px;
  border-radius: 4px;
  overflow: hidden;
}

.pdf-container {
  width: 100%;
  height: 100%;
}
.upload-resume-container {
    padding: 12px;
}

.upload-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.filename {
    flex: 1;
    margin: 0 8px;
}

.upload-status {
    width: 200px;
}

.success-icon {
    color: #52c41a;
}

.error-icon {
    color: #ff4d4f;
}
</style>